<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, nextTick } from 'vue'
  import { getMaintenanceApi } from '@/api/asset/car-repair'
  console.log('-----------------------------------------------------------')
  const dataSource = ref([]) //请求列表
  const mainList = ref([]) //选择列表
  const ids = ref([]) //已选中的id
  const storageList = ref()
  const loadData = async () => {
    dataSource.value = []
    const res = await getMaintenanceApi()
    res.result.forEach((i) => {
      i.check = false
    })
    storageList.value = res.result
    dataSource.value = res.result
    // 选中已选中的
    if (dataSource.value.length && ids.value.length) {
      dataSource.value.forEach((i) => {
        ids.value.forEach((o) => {
          if (i.id == o) {
            i.check = true
          }
        })
      })
    }
  }
  const checkbox = (e) => {
    dataSource.value.forEach((i) => {
      if (i.id == e.id) {
        i.check = !i.check
      }
    })
  }
  const submit = () => {
    dataSource.value.forEach((i) => {
      if (i.check) {
        mainList.value.push({
          repairItemId: i.id,
          // repairItem: dataSource.value.find(function (x) {
          //   return x.id == i.id
          // }).name,
          repairItem: i.name,
          maker: '',
          materialPrice: '',
          num: '',
          partPrice: '',
          remark: '',
        })
      }
    })
    console.log(mainList.value)
    // 选中回传
    setTimeout(() => {
      uni.$emit('getMainlists', mainList.value)
    }, 300)
    uni.navigateBack()
  }
  const searchBarSearch = (e) => {
    if (!e) {
      dataSource.value = []
      nextTick(() => {
        dataSource.value = storageList.value
      })
    }
    var obj = {}
    storageList.value.forEach((i, index) => {
      if (e == i.name && e) {
        obj = i
        dataSource.value = [obj]
        return
      } else {
        if (index + 1 == dataSource.value.length) {
          nextTick(() => {
            dataSource.value = []
          })
        }
      }
    })
  }
  onLoad((options) => {
    console.log('options', options)
    ids.value = JSON.parse(options.ids)
    loadData()
  })
</script>

<template>
  <view class="viewport">
    <ve-search-bar fixed placeholder="请输入" @search="searchBarSearch"></ve-search-bar>
    <view class="record-list" v-if="dataSource && dataSource.length">
      <view class="selector-item" v-for="(item, index) in dataSource" :key="index" @click="checkbox(item)">
        <view>{{ item.name }}</view>
        <view class="selector-item_checkbox">
          <ve-icon v-if="item.check" name="icon-checkbox-select" width="28"></ve-icon>
          <ve-icon v-else name="icon-checkbox" width="28"></ve-icon>
        </view>
      </view>
      <!-- 加载结束列表为空时展示 -->
    </view>
    <ve-empty style="margin-top: 100rpx" v-if="dataSource.length == 0"></ve-empty>
    <ve-bottom-box>
      <ve-button type="primary" @click="submit" style="width: 100%">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<style lang="scss" scoped>
  .viewport {
    min-height: 100vh;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
  }
  .record-list {
    width: 100%;
  }
  .selector-item {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 32rpx;
    margin: 24rpx;

    &_checkbox {
      position: absolute;
      top: 30rpx;
      right: 32rpx;
    }

    &_label {
      margin-right: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 44rpx;
      font-size: 32rpx;
    }

    &_desc {
      margin-top: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #8491a8;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
